<template>
	<div class="OorderDetails ">
		<div class="top  my-form-item" v-show="type==='2'">
			<div class="buttom">
				<div class="li">
					<label>查询时段</label>
					<div class="input-box">
						<el-date-picker v-model="datepicker" type="daterange" range-separator="至" start-placeholder="开始日期"
						 end-placeholder="结束日期" value-format="yyyy-MM-dd" @change="order(1)">
						</el-date-picker>
					</div>
				</div>
				<div class="li">
					<input class="input" v-model="keywords" placeholder="输入订单ID或会员名" @blur="order(1)" />
				</div>
			</div>

			<div class="buttom">
				<div class="li">
					<div class="EXCEL-btn "> 导出该时段订单汇总列表（EXCEL）</div>
				</div>
			</div>
		</div>
		<div class="bottom my-form-item">
			<com-table v-show="type!='2'" :ComTable="ComTable" @ComTablesondata="ComTablesondata"></com-table>
			<com-table v-show="type==='2'" :ComTable="ComTable2" @ComTablesondata="ComTablesondata"></com-table>
			<page v-if="page.total!=0" :page="pageList"></page>
		</div>
		<el-dialog class="dialog"  :visible.sync="res_odetaildata.show">
			<div class="main">
			<div class="row">
				<label class="label">订单号：</label>
				<div class="right-con">
					<p>{{res_odetaildata.order_id}}</p>
				</div>
			</div>
			<div class="row">
				<label class="label">订单人数：</label>
				<div class="right-con">
					<p>{{res_odetaildata.people_number}}</p>
				</div>
			</div>
			<div class="row">
				<label class="label">订单价格：</label>
				<div class="right-con">
					<p>{{res_odetaildata.money}}元</p>
				</div>
			</div>
			<div class="row">
				<label class="label">下单日期：</label>
				<div class="right-con">
					<p>{{res_odetaildata.insert_time}}</p>
				</div>
			</div>
			
				<div class=" row">
					<label class="label">产品信息：</label>
					<div class="right-con">
						<div class="con">
							<p v-for="(i, key, index) in res_odetaildata.info" :key="index">{{i.info_name}}</p>
						</div>
					</div>
				</div>
				<div class=" row">
					<label class="label">车辆信息：</label>
					<div class="right-con">
						<div class="con">
							<p v-for="(i, key, index) in res_odetaildata.cart" :key="index">车牌号:{{i.cars_no}}</p>
						</div>
					</div>
				</div>
			<div class=" rowfor">
				<label class="label">客人名单：</label>
				<div class="right-con">
					<div class="con">
						<p v-for="(i, key, index) in res_odetaildata.people" :key="index" :label="i.name">{{i.name}}:{{i.card}}</p>
					</div>
				</div>
			</div>
		
		</div>
		</el-dialog>
	</div>
</template>

<script>
	import {
		mapGetters,
		mapActions
	} from 'vuex'
	import odetail from "../../../components/odetail.vue";
	export default {
		data() {
			return {
				type: this.$route.params.type,
				datepicker: [],
				keywords: '',
				ComTable: {
					showsummary: true,
					header: "headercolor",
					title: [{
						width: "180px",
						label: '订单号',
						prop: 'order_id',
					}, {
						width: "210px",
						label: '下单时间',
						prop: 'insert_time'
					}, {
						width: "210px",
						label: '出行时间',
						prop: 'go_time'
					}, {
						width: "80px",
						label: '人数',
						prop: 'people_number',
					}, {
						label: '金额',
						prop: 'money',
					}, {
						width: "100px",
						prop: 'id',
						label: '操作',
						type: "btn",
						btnlist: [{
							router: true,
							id: "",
							color: "",
							text: "详情",
						}, ]
					}, ],
					tableData: [],
					multipleSelection: []
				},
				ComTable2: {
					header: "headercolor",
					title: [{
						label: '订单ID',
						prop: 'order_id',
					}, {
						label: '出行时间',
						prop: 'go_time'
					}, {
						label: ' 人数',
						prop: 'people_number',
						width: "50px"
					}, {
						label: ' 车辆数',
						prop: 'car_number',
						width: "50px"
					}, {
						label: ' 核销金额(元)',
						prop: 'money',
					}, {
						label: ' 核销时间',
						prop: 'check_time',
					}, {
						label: ' 结算状态',
						prop: 'settlement_status_text',
						width: "70px"
					}, {
						label: ' 结算时间',
						prop: 'settlement_time',
					}, {
						width: "100px",
						prop: 'id',
						label: '操作',
						type: "btn",
						btnlist: [{
							router: true,
							id: "",
							color: "",
							text: "详情",
						}, ]
					}, ],
					tableData: [],
					multipleSelection: []
				},
				totalnum: 0,
				totalmoney: 0,
				pageList: {},
				odetaildata: {
					show: false
				},
				options: [{
					value: '选项1',
					label: '黄金糕'
				}, {
					value: '选项2',
					label: '双皮奶'
				}, {
					value: '选项3',
					label: '蚵仔煎'
				}, {
					value: '选项4',
					label: '龙须面'
				}, {
					value: '选项5',
					label: '北京烤鸭'
				}],
				value: '',
				tableData6: [],
				odetailshow: false
			};
		},
		mounted() {


			this.getorderselectindex(this.$route.path)
			if (this.type === '4') {
				this.ComTable.title[2].label = "异常类别";
				this.ComTable.title[2].prop = "okerorr";
			} else {
				this.ComTable.title[2].label = "出行时间";
				this.ComTable.title[2].prop = "go_time";
			}
			this.order(1);
		},

		beforeRouteLeave(to, from, next) {
			this.getorderselectindex("/Oticket")
			next();
		},
		components: {
			odetail,
		},
		computed: {
			...mapGetters([
				'token',
				'res_odetaildata',
				'page',
				'res_orderlist',
			])
		},
		methods: {
			...mapActions({
				getres_odetaildata: 'getres_odetaildata',
				getpage: "getpage",
				getres_orderlist: 'getres_orderlist',
				getorderselectindex: 'getorderselectindex'
			}),
			// 图表

			ComTablesondata(res) {
				this.orderDetail({
					token: this.token, //	String	 header传入
					type: res.row.type, //	Number	 type=2景区,type=3酒店 允许值: 2, 3
					order_id: res.row.order_id, //	String	 订单号
					channel_id: res.row.channel_id, //	Int	 公司ID
					time: res.row.go_time, //	String	 出行时间
				})
			},
			// 关闭弹框
			odetailclsoe() {
				this.odetailshow = false;
			},
			// 订单详情
			orderDetail(req) {
				this.$api.GetorderDetail(req)
					.then(res => {
						if (res.code === 200) {
							res.result['show'] = true;
							this.getres_odetaildata(res.result)
						}
					})
			},
			// 订单列表
			order(page) {
				this.$api.Getorder({
						token: this.token,
						type: this.type,
						start_time: this.datepicker[0],
						end_time: this.datepicker[1],
						keywords: this.keywords,
						page: page
					})
					.then(res => {
						if (res.code === 200) {
							this.getres_orderlist(res)
							this.update()
						} else {

						}
					})
			},
			update() {
				this.tableData6 = this.res_orderlist.result.data;
				this.totalnum = 0;
				this.totalmoney = 0;

				for (var i = 0; i < this.tableData6.length; i++) {
					this.tableData6['rowclass'] = "successrow";

					if (this.type === '4') {
						this.tableData6[i]["okerorr"] = "核销超时";
					}
					this.totalnum += this.tableData6[i].people_number;
					this.totalmoney += this.tableData6[i].money;
					this.tableData6['id'] = i;
				}
				this.ComTable.tableData = this.tableData6
				if (this.type === '2') {

					this.ComTable2.tableData = this.tableData6
					for (var i = 0; i < this.ComTable2.tableData.length; i++) {
						if (this.ComTable2.tableData[i].settlement_status === 1) {
							console.log(1)
							this.ComTable2.tableData[i].settlement_status_text = "未结算"
						}
						if (this.ComTable2.tableData[i].settlement_status === 2) {
							this.ComTable2.tableData[i].settlement_status_text = "已结算"
						}
					}
				}
				this.pageList = {
					total: this.res_orderlist.result.total, // String 总共数据条数
					per_page: this.res_orderlist.result.per_page, // String 每页数据条数
					current_page: this.res_orderlist.result.current_page, // String 当前第几页
					last_page: this.res_orderlist.result.last_page, // String 最后一页
				}

			},
			// 分页
			getpagelist(res) {
				this.order(res);
			},
		},
		watch: {
			'$route'(to, from) {
				this.type = to.params.type;

			},
			type(newValue, oldValue) {
				if (this.type === '4') {
					this.ComTable.title[2].label = "异常类别";
					this.ComTable.title[2].prop = "okerorr";
				} else {
					this.ComTable.title[2].label = "出行时间";
					this.ComTable.title[2].prop = "go_time";
				}
				if (this.type != '2') {
					this.datepicker = [];
					this.keywords = "";
				}
				this.order(1);
			}
		}
	};
</script>

<style scoped lang="less">
	.OorderDetails {
		.dialog{
			
			.main {
				display: flex;
				flex-wrap: wrap;
				padding: 5px 0;
				box-sizing: border-box;
				.row {
					width: 100%;
					display: flex;
					line-height: 30px;
					padding: 5px 30px;
					box-sizing: border-box;
					.right-con {
						width: 146px;
					}
					border-bottom: 1px solid #e6e1e1;
				}
				.label {
					width: 80px;
					text-align: right;
				}
				.right-con {
					display: flex;
					flex-wrap: wrap;
					text-align: left;
				}
			
				.rowfor {
					width: 100%;
					text-align: left;
					display: flex;
					padding: 5px 30px;
					box-sizing: border-box;
				}
			
				.btn {
					padding-left: 120px;
					padding-top: 50px;
					box-sizing: border-box;
			
					.el-button {
						width: 365px;
						height: 50px;
						color: #fff;
						background: #41c7db;
						border-radius: 10px;
						font-size: 16px;
						border: 1px solid #8B8B8B;
					}
				}
			
			
			}
		}
		.top {
			width: 100%;

			.buttom {
				width: 100%;
				display: flex;
				justify-content: space-between;
				padding: 10px 0;
				box-sizing: border-box;

				&:last-child {
					.li {
						width: 100%;
					}
				}

				.li {
					display: flex;
					line-height: 40px;

					label {
						margin-right: 10px;
					}

					.input {
						border: none;
						border: 1px solid #DCDFE6;
						padding: 0 20px;
						box-sizing: border-box;
						border-radius: 50px;
					}

					.EXCEL-btn {
						cursor: pointer;
						color: #fff;
						background: #ff9900;
						padding: 0 20px;
						box-sizing: border-box;
						border-radius: 5px;
						margin: auto;
					}

				}
			}


		}

		.bottom {
			.total {
				width: 100%;
				display: flex;
				justify-content: space-between;
				border: 1px solid #8b8b8b;
				border-top: none;
				line-height: 30px;

				.to {
					border-right: 1px solid #8b8b8b;

				}
			}

			table tr td .cell,
			.el-table th>.cell {
				text-align: center;
				color: #000;
				height: 30px;
				line-height: 30px;
			}

			.el-table--border,
			.el-table--group,
			.el-table--border td,
			.el-table--border th,
			.el-table__body-wrapper .el-table--border.is-scrolling-left~.el-table__fixed {
				border-color: #8b8b8b;
			}

			.el-table--border {
				border: 1px solid #c5c5c5;
			}

			.el-table--border::after,
			.el-table--group::after,
			.el-table::before {
				display: none;
			}

			.el-table td,
			.el-table th {
				height: 30px;
				padding: 0;
				line-height: 30px;
			}

			.el-table .warning-row {
				background: #ffffcc;
			}

		}

	}
</style>
